<template>
  <view class="nav-bar">
    <view class="nav-content">
      <view class="nav-left" @click="handleBack" v-if="showBack">
        <text class="icon">←</text>
      </view>
      <view class="nav-title">{{ title }}</view>
      <view class="nav-right">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  showBack: {
    type: Boolean,
    default: false
  }
})

const handleBack = () => {
  uni.navigateBack()
}
</script>

<style lang="scss">
@use '@/uni.scss' as *;

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: $white;
  box-shadow: $shadow-sm;
  height: 200rpx;
  display: flex;
  align-items: center;
  
  .nav-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 $spacing-base;
    
    .nav-left {
      width: 100rpx;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .icon {
        font-size: 50rpx;
        color: $text-color;
      }
    }
    
    .nav-title {
      flex: 1;
      text-align: center;
      font-size: 40rpx;
      font-weight: 500;
      color: $text-color;
    }
    
    .nav-right {
      width: 100rpx;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>

<script lang="ts">
export default {
  name: 'NavBar'
}
</script> 